<template>
  <div class="execution-setting">
    <el-form label-width="120px">
      <!-- 触发类型 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="触发类型">
            <el-radio-group v-model="triggerType" @change="handleTriggerTypeChange">
              <el-radio label="immediate">立即执行</el-radio>
              <el-radio label="scheduled">定时执行</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 定时执行时间选择 -->
      <el-row v-if="triggerType === 'scheduled'">
        <el-col :span="24">
          <el-form-item label="执行时间">
            <el-date-picker
              v-model="scheduledTime"
              type="datetime"
              placeholder="请选择执行时间"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 任务类型 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="任务类型">
            <el-radio-group v-model="taskType" @change="handleTaskTypeChange">
              <el-radio label="once">单次任务</el-radio>
              <el-radio label="recurring">循环任务</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 循环周期设置 -->
      <div v-if="taskType === 'recurring'">
        <el-row>
          <el-col :span="24">
            <el-form-item label="循环周期">
              <el-select v-model="recurringPattern" placeholder="请选择循环周期" style="width: 100%">
                <el-option label="每天" value="daily"></el-option>
                <el-option label="每周" value="weekly"></el-option>
                <el-option label="每月" value="monthly"></el-option>
                <el-option label="每年" value="yearly"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup name="ExecutionSetting" lang="ts">
import { ref, watch, onMounted } from 'vue'

// 定义属性
const props = defineProps({
  triggerType: {
    type: String,
    default: 'immediate'
  },
  scheduledTime: {
    type: [String, Object],
    default: ''
  },
  taskType: {
    type: String,
    default: 'once'
  },
  recurringPattern: {
    type: String,
    default: ''
  }
})

// 定义事件
const emit = defineEmits([
  'update:triggerType',
  'update:scheduledTime',
  'update:taskType',
  'update:recurringPattern'
])

// 触发类型
const triggerType = ref(props.triggerType)

// 定时执行时间
const scheduledTime = ref(props.scheduledTime)

// 任务类型
const taskType = ref(props.taskType)

// 循环周期
const recurringPattern = ref(props.recurringPattern)

// 处理触发类型变化
function handleTriggerTypeChange(value) {
  emit('update:triggerType', value)
}

// 处理任务类型变化
function handleTaskTypeChange(value) {
  emit('update:taskType', value)
}

// 监听属性变化并更新本地数据
watch(() => props.triggerType, (newVal) => {
  triggerType.value = newVal
})

watch(() => props.scheduledTime, (newVal) => {
  scheduledTime.value = newVal
})

watch(() => props.taskType, (newVal) => {
  taskType.value = newVal
})

watch(() => props.recurringPattern, (newVal) => {
  recurringPattern.value = newVal
})

// 监听本地数据变化并更新父组件
watch(triggerType, (newVal) => {
  emit('update:triggerType', newVal)
})

watch(scheduledTime, (newVal) => {
  emit('update:scheduledTime', newVal)
})

watch(taskType, (newVal) => {
  emit('update:taskType', newVal)
})

watch(recurringPattern, (newVal) => {
  emit('update:recurringPattern', newVal)
})

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里添加初始化逻辑
})
</script>

<style scoped>
.execution-setting {
  padding: 20px;
}
</style>